<template>
  <div class="contain" style="padding: 0 3px">
    <el-select
      :style="{ width: width }"
      style="padding: 0 3px"
      class="select-linkage"
      clearable
      @clear="changeProvince('')"
      :size="size"
      :model-value="province"
      :value="province"
      @change="changeProvince"
      placeholder="请选择省份"
    >
      <el-option v-for="item in provinceData" :key="item.code" :label="item.name" :value="item.name" />
    </el-select>
    <el-select
      :style="{ width: width }"
      style="padding: 0 3px"
      class="select-linkage"
      clearable
      @clear="changeCity('')"
      :size="size"
      :model-value="city"
      :value="city"
      :disabled="!province"
      @change="changeCity"
      placeholder="请选择城市"
    >
      <el-option v-for="item in getCity" :key="item.code" :label="item.name" :value="item.name" />
    </el-select>
    <el-select
      v-if="level > 2"
      :style="{ width: width }"
      style="padding: 0 3px"
      class="select"
      clearable
      @clear="changeArea('')"
      :size="size"
      :model-value="area"
      :value="area"
      :disabled="!province || !city"
      @change="changeArea"
      placeholder="请选择区县"
    >
      <el-option v-for="item in getArea" :key="item.code" :label="item.name" :value="item.name" />
    </el-select>
    <el-select
      v-if="level > 3"
      :style="{ width: width }"
      style="padding: 0 3px"
      class="select-linkage"
      clearable
      @clear="changeStreet('')"
      :size="size"
      :model-value="street"
      :value="street"
      :disabled="!province || !city || !area"
      @change="changeStreet"
      placeholder="请选择街道"
    >
      <el-option v-for="item in getStreet" :key="item.code" :label="item.name" :value="item.name" />
    </el-select>
  </div>
</template>
<script>
import address from './utils/address.json'
export default {
  name: 'yzw-select-linkage',
  props: ['province', 'city', 'area', 'street', 'width', 'size', 'level'],
  data() {
    return {
      provinceData: []
    }
  },
  created() {
    // 省份数据初始化
    this.provinceData = address
  },
  computed: {
    // 获取市
    getCity() {
      let cityList = this.provinceData.filter((item) => {
        return item.name == this.province
      })
      return cityList[0] ? cityList[0].children : []
    },
    // 获取地区县
    getArea() {
      let areaList = this.getCity.filter((item) => item.name == this.city)
      return areaList[0] ? areaList[0].children : []
    },
    // 获取街道
    getStreet() {
      let streetList = this.getArea.filter((item) => item.name == this.area)
      return streetList[0] ? streetList[0].children : []
    }
  },
  methods: {
    // 省份更改
    changeProvince(e) {
      this.$emit('update:province', e)
      this.$emit('update:city', '')
      this.$emit('update:area', '')
      this.$emit('update:street', '')
    },
    // 市更改
    changeCity(e) {
      this.$emit('update:city', e)
      this.$emit('update:area', '')
      this.$emit('update:street', '')
    },
    // 区更改
    changeArea(e) {
      this.$emit('update:area', e)
      this.$emit('update:street', '')
    },
    // 街道
    changeStreet(e) {
      this.$emit('update:street', e)
    }
  }
}
</script>
